<template>
  <div class="nil-drawer">
    <el-scrollbar class="nil-drawer-body">
      <el-form ref="form" :model="formData" label-width="120px">
        <el-form-item label="账号">
          <el-input v-model="formData.account" :disabled="loading"></el-input>
        </el-form-item>
        <el-form-item v-if="!isChange" label="密码">
          <el-input v-model="formData.password" :disabled="loading"></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="formData.name" :disabled="loading"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="formData.status"
            :disabled="loading"
            style="width: 100%"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="角色">
          <el-select
            v-model="formData.roleId"
            placeholder="Select"
            style="width: 100%"
          >
            <el-option
              v-for="item in roles"
              :key="item.id"
              :label="item.roleName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="ID">
          <el-input disabled v-model="formData.id"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button :loading="loading" type="primary" @click="save">{{
            isChange ? "修改" : "创建"
          }}</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { onMounted, reactive } from "vue";
const statusOptions = [
  { label: "正常", value: "0" },
  { label: "锁定", value: "1" },
];

const props = defineProps({
  loading: Boolean,
  isChange: Boolean,
  roles: Array,
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const formData = reactive(props.data);

const emit = defineEmits(["save", "change", "cancel"]);

onMounted(() => {
  if (!props.isChange) {
    formData.status = "0";
  }
});

function save() {
  if (props.isChange) {
    emit("change", formData);
  } else {
    emit("save", formData);
  }
}

function cancel() {
  emit("cancel");
}
</script>

<style lang="scss" scoped></style>
